<template>
	<div class='user'>	
		<h3>课程列表</h3>
		<ul>
			<li v-for="user in users">
				<h4 v-rainbow>{{user.name}}</h4>
				<h4>{{user.website}}</h4>
				<button v-on:click="deletUser(user)">删除</button>
			</li>
		</ul>

		<form action="" method="get" v-on:submit="addUser">
			<fieldset>
				<legend>添加课程信息</legend>
				章节内容：<input type="text" placeholder="请添加用户名" v-model="newUser.name">
				发布人：<input type="text" v-model="newUser.website"><br>	
				<input type="submit" value="提交" />
			</fieldset>
		</form>
	</div>
</template>

<script>
	export default {
		name: 'app-user',
		data() {
			return {
				newUser:{},
				users: [{
						name: '初识Vue.js',
						website: 'Dalian',
						show: true
					},
					{
						name: 'Vue.js的内置指令',
						website: 'Shenyang',
						show: true
					},
					{
						name: '过滤器',
						website: 'Shanghai',
						show: true
					},
					{
						name: 'Vue.js的过渡',
						website: 'Beijing',
						show: true
					},
					{
						name: 'Vue.js组件',
						website: 'Shenzhen',
						show: true
					},
					{
						name: '自定义指令',
						website: 'Dalian',
						show: true
					},
					{
						name: 'Vue.js常见插件',
						website: 'Jinan',
						show: true
					},
					{
						name: 'Vue脚手架',
						website: 'Qingdao',
						show: true
					},
					{
						name: '前端组件库',
						website: 'Qingdao',
						show: true
					},
				]
			}
		},
		methods:{
			addUser:function(e){
				e.preventDefault();
				this.users.push({
					name:this.newUser.name,
					website:this.newUser.website,
					show:true,
				});
			},
			deletUser:function(user){
				this.users.splice(this.users.indexOf(user),1);
				
			}
		},
	}
</script>

<style>
	.user {
		border: 1px solid gray;
		width: 80%;
		margin: 20px auto;
		padding-bottom: 10px;
	}
	
	.user ul {
		list-style-type: none;
	}
	
	.user li {
		width: 33%;
		float: left;
		text-align: center;
		border: solid 1px green;
		height: 100px;
	}
	
	.user h3,legend {
		color: red;
		font-size: 20px;
		font-weight: bold;
	}
	input[type=text]{
		width: 20%;
	}
	.user form{
		clear: both;
		padding-top: 20px;
	}
</style>